<template>
  <div class="container">
    <div class="editor-control">
      <input type="text" :value="fileName"/>
      <button @click="publish">发布</button>
    </div>
    <div class="editor row">
      <textarea class="col-xs-6 col-sm-6 col-md-6 col-lg-6" :value="fileContent" @input="update" title="md"></textarea>
      <div class="col-xs-6 col-sm-6 col-md-6 col-lg-6" v-html="compiledMarkdown"></div>
    </div>
  </div>
</template>

<script>
  // 防抖
  // npm i --save lodash
  import Lodash from 'lodash'
  import Markdown from './../../utils/markdown'
  import './../../assets/css/markdown.css'
  import Axios from './../../utils/axios'
  import Constant from './../../utils/constant'

  export default {
    name: "article-write",
    data: function () {
      return {
        author: 'mazaiting',
        category: 'Android',
        fileName: 'AndroidTest',
        fileContent: ''
      }
    },
    created: function () {
      this.getUserInfo();
    },
    computed: {
      // 将文本内容编译为Markdown内容
      compiledMarkdown: function () {
        return Markdown.render(this.fileContent, {sanitize: true})
      }
    },
    methods: {
      // 获取用户信息
      getUserInfo: function () {
        this.author = this.$route.params.author;
        this.category = this.$route.params.category;
      },
      // 发布内容
      publish: function () {
        const _this = this;
        Axios.post(Constant.URL_ARTICLE + '/update', {
          // author: _this.author,
          author: 'linghaoyu',
          category: _this.category,
          fileName: _this.fileName,
          content: _this.fileContent
        }).then((res) => {
          console.log(res)
        }).catch((e) => {
          console.log(e)
        })
      },
      // 更新文本
      update: Lodash.debounce(function (e) {
        // 赋值
        this.fileContent = e.target.value
      }, 300)
    }
  }
</script>

<style scoped>
  .container {
    width: 100%;
    height: 100%;
    background: #FFF;
    padding: 0;
    margin: 0;
  }

  .editor-control {
    background: red;
    height: 10%;
  }

  .editor {
    margin: 0;
    height: 90%;
    font-family: 'Helvetica Neue', Arial, sans-serif;
    color: #333;
    overflow: hidden;
  }

  .editor div {
    display: inline-block;
    height: 100%;
    vertical-align: top;
    box-sizing: border-box;
    padding: 20px;
    overflow-y: scroll;
    overflow-x: hidden;
  }

  textarea {
    display: inline-block;
    height: 100%;
    vertical-align: top;
    box-sizing: border-box;
    border: none;
    border-right: 1px solid #ccc;
    resize: none;
    outline: none;
    background-color: #f6f6f6;
    font-size: 14px;
    font-family: 'Monaco', courier, monospace;
    padding: 20px;
  }
</style>
